<!--@author vidy3587@gmail.com-->
<template>
  <form action="" class="search-bar row" @submit="search()">
    <div class="col-1 input-container">
      <input v-model="searchText" type="search" placeholder="搜索选手编号、昵称" class="search-input">
    </div>
    <button type="submit" class="search-btn">
      <img class="search-icon" src="@/assets/search.png" alt="搜索">
    </button>
  </form>
</template>

<script>
export default {
  name: "SearchBar",
  data() {
    return {
      searchText: ''
    }
  },
  props: {},
  computed: {},
  methods: {
    search() {
      this.$emit('search', this.searchText);
    }
  }
}
</script>

<style scoped lang="scss">
.search-bar {
  display: inline-flex;

  width: px2rem(603px);
  height: px2rem(72px);

  input {
    width: 100%;
    height: 100%;
    text-indent: px2rem(40px);
    border: none;
    background-color: #fff;
    border-radius: 0;
    font-size: px2rem(24px);

    &:focus {
      border: none;
      outline: none;
    }
  }
}

.search-btn {
  width: px2rem(121px);
  height: px2rem(72px);
  background: $warmColor;
  border: none;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: px2rem(40px);
}

.search-icon {
  width: px2rem(40px);
  height: px2rem(38px);
}

.input-container {
  background: #fff;

}
</style>